import React, { useState } from "react";

import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import { Button, Layout, Avatar, theme,Dropdown } from "antd";
import {useDispatch}from 'react-redux'
import {collapseMenu} from '../../store/reducers/tab'
const { Header, Sider, Content } = Layout;


export default function Headers({collapsed}) {
  // const [collapsed, setCollapsed] = useState(false);
  const dispatch=useDispatch()
  //退出
    const logout=()=>{

  }
  const items = [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer" >
          个人中心
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a onClick={()=>logout} target="_blank" rel="noopener noreferrer" >
          退出
        </a>
      ),

    },
  
  ];

  //点击展开收起
  const setCollapsed=()=>{
    dispatch(collapseMenu())
  }
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <div>
      <Header className="header">
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={()=>{setCollapsed()}}
          style={{
            fontSize: "16px",
            width: 64,
            height: 32,
            background:'white'
          }}
  
        />
        <Dropdown 
           menu={{
      items,
    }}>
    <Avatar size={36} src={<img src={require('../../assets/image/2.png')} alt="avatar" />} />
        </Dropdown>
      
      </Header>
    </div>
  );
}
